<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.commodity_details" :background="background" :border-bottom="false"
			title-color="#000000" back-icon-color="#000"></u-navbar>

		<view class="alls">
			<view class="tabs">
				<view class="tab" v-for="(item,index) in i18n.commodity.commodity_details.tablist" :key="index">
					<view :class="ide==index?'tabconted':'tabcont'" @click="changetab(index)">
						<text>{{item}}</text>
						<view class="xian"></view>
					</view>
					<view class="borl">
					</view>
				</view>
			</view>

			<view class="shopinfo" v-if="ide==0">
				<view class="shopname">
					<view class="shoptitle">
						{{i18n.commodity.commodity_details.shop_tit}}
					</view>
					<text>{{shopdetails.storeName}}</text>
				</view>
				<view class="shopname2" >
					<view>{{i18n.commodity.commodity_details.categories}}</view>
					<view class="shopname2_r">
						<text v-for="(shoptype,index2) in showshoptype" :key="index2">{{shoptype.name}}</text>
					</view>
				</view>
				<view class="shopname2">
					<view>{{i18n.commodity.commodity_details.type}}</view>
					<text>{{pctype}}</text>
				</view>
				<view class="shopname2">
					<view>{{i18n.commodity.commodity_details.brand}}</view>
					<text>{{brand}}</text>
				</view>
				<view class="service">
					<text>
						{{i18n.commodity.commodity_details.service}}
					</text>
					<scroll-view scroll-x="true" class="scrollw">
						<view class="servcont">
							<view class="oneof" v-for="(item,index) in services" :key="index">
								{{item.name}}
							</view>
						</view>
					</scroll-view>

				</view>
				<view class="shopname">
					<view class="shoptitle">
						{{i18n.commodity.commodity_details.shop_introduction}}
					</view>
					<text>{{shopdetails.storeInfo}}</text>
				</view>

				<view class="botimg">
					<view class="cover">
						<text>{{i18n.commodity.commodity_details.cover_picture}}</text>
						<view class="carousel">
							<image :src="shopdetails.image" mode=""></image>
						</view>

					</view>
					<view class="cover">
						<text>{{i18n.commodity.commodity_details.carousel}}</text>
						<view class="carousel">
							<image v-for="(item,index) in carousel" :src="item" mode=""></image>
						</view>
					</view>
				</view>

			</view>

			<!-- 商品属性 -->
			<view class="shopattributes" v-if="ide==1">
				<view class="freight">
					<view>{{i18n.commodity.commodity_details.freight}}</view>
					<text>1</text>
				</view>
				<view class="freight">
					<view>{{i18n.commodity.commodity_details.discount}}</view>
					<text>无</text>
				</view>
				<view class="specification">
					{{i18n.commodity.commodity_details.specification}}
				</view>

				<view class="content" v-for="(item,index) in shopdetails.attrValue">
					<view class="cont_t">
						<view class="cont_l">
							<image src="../../../static/images/simple.webp" mode=""></image>
						</view>
						<view class="cont_r">
							<view class="type_t">
								<view class="typedetails">
									{{item.sku}}
								</view>
								<text>{{i18n.commodity.commodity_details.color}}</text>
							</view>
							<view class="type_t">
								<view class="typedetails">
									{{item.volume}}
								</view>
								<text>{{i18n.commodity.commodity_details.volume}}</text>
							</view>
							<view class="type_t">
								<view class="typedetails">
									{{item.weight}}
								</view>
								<text>{{i18n.commodity.commodity_details.weight}}</text>
							</view>
						</view>
					</view>
					<view class="money">
						<view class="commercial_price">
							<text>{{i18n.commodity.commodity_details.selling_price}}：</text>
							<view class="moneys">¥{{item.price}}</view>
						</view>
						<view class="commercial_price">
							<text>{{i18n.commodity.commodity_details.cost}}：</text>
							<view class="moneys">¥{{item.cost}}</view>
						</view>
						<view class="commercial_price">
							<text>{{i18n.commodity.commodity_details.original_price}}：</text>
							<view class="moneys">¥{{item.otPrice}}</view>
						</view>
					</view>
					<view class="in_stock">
						<text>{{i18n.commodity.commodity_details.stock}}：</text>
						<view class="stocknum">
							{{item.price}}
						</view>
					</view>

				</view>
			</view>

			<view class="shop_details" v-if="ide==2">
				<u-parse :html="shopdetails.content"></u-parse>

			</view>


		</view>
		<!-- 	<view class="infobut">
			<view class="infosub">
				{{i18n.commodity.commodity_details.submit}}
			</view>
			<view class="infodel">
				{{i18n.commodity.commodity_details.bin}}
			</view>
		</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				ide: 0,
				tablist: ['商品信息', '商品属性', '商品详情'],
				shopdetails: '',
				carousel: [],
				brand: '',
				services: [],
				pctype: '',
				shoptypelist: [],
				showshoptype: []

			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onLoad(data) {
			this.getdetails(JSON.parse(data.id))
			console.log(data);
			this.getservices()
			this.getallbrand()
			this.getshoptype()
		},
		onShow() {
			this.lang()
		},
		methods: {
			//获取详情信息
			getdetails(id) {
				global.$http.request({
					url: '/api/admin/merchant/product/info/' + id,
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},


				}).then(res => {
					if (res.data.code == 200) {
						this.shopdetails = res.data.data
						this.getbrand(res.data.data.categoryId)
						this.carousel = JSON.parse(res.data.data.sliderImage)
						this.getbrandtype()
					}
				})
			},
			getservices() {
				global.$http.request({
					url: '/api/admin/merchant/product/guarantee/list',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						console.log('保障服务', res.data.data);
						this.services = res.data.data
					}
				})
			},
			//获取品牌信息
			getbrand(id) {
				global.$http.request({
					url: '/api/admin/merchant/product/brand/list',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {
						cid: id
					}

				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data);
						console.log(res.data.data);
						// this.brand = res.data.data.list[0].name
					}
				})
			},
			//获取全部品牌信息
			getallbrand() {
				global.$http.request({
					url: '/api/admin/merchant/product/brand/cache/list',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {}
				}).then(res => {
					if (res.data.code == 200) {
						this.allbrand = res.data.data
						for (let i = 0; i < res.data.data.length; i++) {
							if (this.shopdetails.brandId == res.data.data[i].id) {
								this.brand = res.data.data[i].name
							}
						}
					}
				})
			},
			//获取平台商品分类
			getbrandtype() {
				global.$http.request({
					url: '/api/admin/merchant/product/category/cache/tree',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						this.treelist = res.data.data
						for (let i = 0; i < res.data.data.length; i++) {
							for (let j = 0; j < res.data.data[i].childList.length; j++) {
								for (let k = 0; k < res.data.data[i].childList[j].childList.length; k++) {
									if (this.shopdetails.categoryId == res.data.data[i].childList[j].childList[k]
										.id) {
										this.pctype = res.data.data[i].childList[j].childList[k].name
										console.log('平台商品分类',res.data.data[i].childList[j].childList[k].id);
									}
								}
							}
						}
					}
				})
			},

			//获取商户分类
			getshoptype() {
				global.$http.request({
					url: '/api/admin/merchant/store/product/category/cache/tree',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {}
				}).then(res => {
					if (res.data.code == 200) {
						this.shoptypelist = res.data.data
						//循环找到默认值
						var result = this.shopdetails.cateId.split(",");
						console.log('截取的',result);
					if(result!=undefined){
						for (let k = 0; k < result.length; k++) {
							for (var i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].id == Number(result[k])) {
									this.showshoptype.push(res.data.data[i])
								}
							}
						}
					}else{
						this.showshoptype.push(this.shopdetails.cateId)
					}


					}
				})
			},


			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			changetab(index) {
				this.ide = index
				console.log(this.ide);
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding-bottom: 130rpx;

		.main {
			width: 750rpx;
			height: 100%;

			.alls {
				.tabs {
					width: 750rpx;
					display: flex;
					align-items: center;
					background-color: #fff;
					height: 88rpx;

					.tab {
						// width: 249rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.tabcont {
							width: 250rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;

							// .xian {
							// 	width: 40rpx;
							// 	height: 4rpx;
							// 	background: #FF0000;
							// 	position: absolute;
							// 	top: 57rpx;
							// }
						}

						.tabconted {
							width: 250rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;
							color: #FF0000;

							.xian {
								width: 40rpx;
								height: 4rpx;
								background: #FF0000;
								position: absolute;
								top: 57rpx;
							}
						}

						.borl {
							width: 2rpx;
							height: 24rpx;
							background: #CCCCCC;


						}

					}


				}


				.shopinfo {
					margin-top: 10rpx;

					.shopname {
						background-color: #fff;
						margin-bottom: 2rpx;
						padding: 29rpx 67rpx 36rpx 22rpx;

						.shoptitle {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #808080;
							padding-bottom: 28rpx;
						}

						text {

							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
							line-height: 50rpx;
						}
					}

				.shopname2 {
					padding: 28rpx 23rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;
					margin-bottom: 2rpx;
				
					view {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #808080;
					}
				
				
					.shopname2_r {
						// display: flex;
						align-items: center;
				
						text {
							display: block;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}

					.service {
						background-color: #fff;
						margin-bottom: 2rpx;

						text {
							display: block;
							margin: 20rpx 0 24rpx 23rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #808080;
						}

						.scrollw {
							width: 98%;
							margin: 0 auto;

							.servcont {

								display: flex;
								align-items: center;
								padding: 0 25rpx;

								.oneof {
									white-space: nowrap;
									margin: 0 20rpx 14rpx 0;
									padding: 12rpx 15rpx;
									background: #304156;
									font-size: 22rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FFFFFF;

								}
							}
						}

					}

					.botimg {
						padding: 0 24rpx;

						.cover {
							text {
								padding: 25rpx 0;
								display: block;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #304156;
							}

							.carousel {
								display: flex;
								align-items: center;
								flex-wrap: wrap;

								image {
									margin: 0 10rpx 10rpx 0;
									width: 160rpx;
									height: 160rpx;
								}
							}

						}
					}


				}

				.shopattributes {
					margin-top: 10rpx;

					.freight {
						display: flex;
						justify-content: space-between;
						padding: 28rpx 28rpx 28rpx 22rpx;
						background-color: #fff;
						margin-bottom: 2rpx;

						view {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #808080;
						}

						text {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}

					.specification {
						padding: 27rpx 23rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #304156;
					}

					.content {
						background-color: #fff;
						padding: 26rpx 0;
						margin-bottom: 10rpx;

						.cont_t {
							padding-bottom: 24rpx;
							border-bottom: 2rpx solid #f7f7f7;
							margin: 0 23rpx;
							display: flex;
							align-items: center;

							.cont_l {
								image {
									width: 160rpx;
									height: 160rpx;
								}
							}

							.cont_r {
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding-left: 36rpx;
								width: 550rpx;

								.type_t {
									display: flex;
									flex-direction: column;
									align-items: center;

									.typedetails {
										width: 140rpx;
										height: 62rpx;
										background: #F2F2F2;
										text-align: center;
										line-height: 62rpx;
										font-size: 26rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #000000;

									}

									text {
										display: block;
										padding: 23rpx 0;
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #808080;
									}
								}
							}
						}

						.money {
							margin: 17rpx 22rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							border-bottom: 2rpx solid #f7f7f7;
							padding-bottom: 17rpx;

							.commercial_price {
								display: flex;
								align-items: center;


								text {
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #808080;
								}

								.moneys {
									font-size: 26rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #000000;
									text-align: center;
									line-height: 48rpx;
									padding: 0 5rpx;
									height: 48rpx;
									background: #F2F2F2;
								}
							}
						}

						.in_stock {
							padding: 28rpx 22rpx;
							display: flex;
							align-items: center;

							text {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #808080;
							}

							.stocknum {
								width: 615rpx;
								height: 48rpx;
								line-height: 48rpx;
								background: #F2F2F2;
								padding-left: 19rpx;
							}
						}
					}

					.infobut {
						position: fixed;
						bottom: 0;
						width: 750rpx;
						display: flex;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						line-height: 98rpx;

						.infosub {
							width: 50%;
							height: 98rpx;
							background: #0F82FF;
						}

						.infodel {
							width: 50%;
							height: 98rpx;
							background: #304156;
						}
					}
				}

				.shop_details {
					margin-top: 10rpx;

					.detailsimg {
						image {
							width: 750rpx;
							height: 100vh;
						}
					}

					.infobut {
						position: fixed;
						bottom: 0;
						width: 750rpx;
						display: flex;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						line-height: 98rpx;

						.infosub {
							width: 50%;
							height: 98rpx;
							background: #0F82FF;
						}

						.infodel {
							width: 50%;
							height: 98rpx;
							background: #304156;
						}
					}
				}



			}

			.infobut {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				display: flex;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 98rpx;

				.infosub {
					width: 50%;
					height: 98rpx;
					background: #0F82FF;
				}

				.infodel {
					width: 50%;
					height: 98rpx;
					background: #304156;
				}
			}
		}
	}
</style>
